<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<title></title>
	</head>
	<link rel="stylesheet" href="../common.css">
	<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
	<style>
		body {
			background: #062538;
		}

		section {
			width: 930px;
			flex-wrap: wrap;
		}

		main {
			flex-shrink: 0;
			position: relative;
			width: 450px;
			height: 350px;
			overflow: hidden;
			background: #000;
			border-radius: 2px;
			margin-top: 20px;
		}

		main:nth-child(-n+2) {
			margin-top: 0;
		}

		main:nth-child(2n+2) {
			margin-left: 30px;
		}

		main::before,
		main::after {
			content: '';
			position: absolute;
			width: 200%;
			height: 200%;
			border: solid #000;
			transition: transform 0.4s;
			pointer-events: none;
			z-index: 1;
		}

		main::before {
			right: 0;
			bottom: 0;
			border-width: 0 70px 60px 0;
			transform: translate(70px, 60px);
		}

		main::after {
			top: 0;
			left: 0;
			border-width: 15px 0 0 15px;
			transform: translate(-15px, -15px);
		}

		main img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: all 0.4s;
		}



		main h2 {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 50%;
			height: 60px;
			line-height: 60px;
			text-align: center;
			letter-spacing: 5px;
			font-weight: bold;
			text-shadow: 0 2px 0 rgba(255, 170, 0, .5);
			transform: translate(100%);
			transition: transform 0.4s;
			z-index: 2;
		}

		main p {
			position: absolute;
			right: 0;
			top: 15px;
			width: 70px;
			z-index: 2;
		}

		main p i {
			margin-bottom: 30px;
			font-size: 23px !important;
			cursor: pointer;
			transform: translate(60px);
			opacity: 0;
			transition: all 0.4s;
		}

		main:hover::before,
		.content:hover::after,
		main:hover h2,
		main:hover p i {
			transform: translate(0, 0);
		}

		main:hover p i {
			opacity: 1;
		}

		main:hover p i:nth-child(1) {
			transition-delay: 0.05s;
		}

		main:hover p i:nth-child(2) {
			transition-delay: 0.1s;
		}

		main:hover p i:nth-child(3) {
			transition-delay: 0.15s;
		}

		main:hover p i:nth-child(4) {
			transition-delay: 0.2s;
		}

		main p i:hover {
			color: orange;
		}

		main:hover img {
			opacity: 0.8;
			width: 365px;
			height: 275px;
			margin: 15px 0 0 15px;
		}

		.content {
			color: #fff;
		}
	</style>
	<body>
		<section class="flex-row">
			<main>
				<img src="https://t7.baidu.com/it/u=48006913,1459517342&fm=193&f=GIF" />
				<div class="content">
					<h2>苏苏来了！</h2>
					<p class="flex-column">
						<i class="fa fa-download"></i>
						<i class="fa fa-heartbeat"></i>
						<i class="fa fa-camera"></i>
						<i class="fa fa-share-alt"></i>
					</p>
				</div>
			</main>
			<main>
				<img src="https://img0.baidu.com/it/u=1499797554,1662235122&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" />
				<div class="content">
					<h2>苏苏来了！</h2>
					<p class="flex-column">
						<i class="fa fa-download"></i>
						<i class="fa fa-heartbeat"></i>
						<i class="fa fa-camera"></i>
						<i class="fa fa-share-alt"></i>
					</p>
				</div>
			</main>
			<main>
				<img src="https://img0.baidu.com/it/u=3125257795,2505653857&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" />
				<div class="content">
					<h2>苏苏来了！</h2>
					<p class="flex-column">
						<i class="fa fa-download"></i>
						<i class="fa fa-heartbeat"></i>
						<i class="fa fa-camera"></i>
						<i class="fa fa-share-alt"></i>
					</p>
				</div>
			</main>
			<main>
				<img src="https://img0.baidu.com/it/u=3501378553,533160478&fm=253&fmt=auto&app=138&f=JPEG?w=1458&h=500" />
				<div class="content">
					<h2>苏苏来了！</h2>
					<p class="flex-column">
						<i class="fa fa-download"></i>
						<i class="fa fa-heartbeat"></i>
						<i class="fa fa-camera"></i>
						<i class="fa fa-share-alt"></i>
					</p>
				</div>
			</main>
		</section>

	</body>
</html>
